<template>
	<view>
		<van-toast id="van-toast"></van-toast>	
		<!-- 顶部头像区域 -->
		<view class="img-area">
			<image src="../../static/logo.png" mode=""></image>
			<text>{{ userDetailObj.usersname }}</text>
		</view>
		<!-- 底部详情信息 -->
		<view class="info-item">
			<van-cell title="买买买账号" is-link :value="userDetailObj.usersid" />
			<van-cell @click="editUserItem('手机号', $event)" title="手机号" is-link :value="userDetailObj.userstel" />
			<van-cell @click="editUserItem('昵称', $event)" title="买买买昵称" is-link :value="userDetailObj.usersname" />
			<picker mode="date" :value="currentBirthDate" @change="changeCurrentChosenDate" >
				<view>
					<van-cell @click="showBirthCalendar = true" title="出生日期" is-link :value="userDetailObj.birth ? userDetailObj.birth.split('T')[0] : '未设置'" />
				</view>
			</picker>
			<picker mode="selector" :range="['女', '男']" :value="currentSex" @change="changeCurrentChosenSex" >
				<view>
					<van-cell title="性别" is-link :value="sex" />
				</view>
			</picker>
		</view>
		<!-- 弹出框 -->
		<van-dialog
		  use-slot
		  :title="'修改' + activeItemName"
		  :show="showDialog"
			@cancel="cancelCurrentDialog"
			@confirm="submitCurrentEdition"
		  show-cancel-button
		>
		  <van-field
				:value="currentValue"
				:placeholder="'请输入' + activeItemName"
				:border="false"
				@change="onChange"
			/>
		</van-dialog>
	</view>
</template>

<script>
import Toast from '../../wxcomponents/vant-weapp/toast/toast'
	export default {
		onLoad() {
			this.getUserDetailInfo()
		},
		data() {
			return {
				// 存储用户详细信息的对象
				userDetailObj: {},
				// 控制弹出框dialog是否可见
				showDialog: false,
				// dialog弹出框输入框中的绑定值
				currentValue: '',
				// 当前激活项的标签名
				activeItemName: '',
				// 控制日历组件是否展示
				showBirthCalendar: false,
				// 日期选择器当前选中的日期
				currentBirthDate: '',
				// 当前默认选中的性别  默认为男 值为0
				currentSex: 0
			}
		},
		computed: {
			sex() {
				let str = ''
				if(this.userDetailObj.sex === 1) {
					str = '男'
				} else if(this.userDetailObj.sex === 0) {
					str = '女'
				} else {
					str = '保密'
				}
				return str
			},
		},
		methods: {
			// 获取当前用户详细信息
			async getUserDetailInfo() {
				const { data: res } = await uni.$http.get('/user/detail', { id: uni.getStorageSync('uid') })
				if(res.meta.status !== 200) return Toast.fail('获取用户详情失败')
				this.userDetailObj = res.recordset[0]
				console.log(this.userDetailObj)
			},
			// 当当前cell单元格被点击时触发 修改当前项的基本信息
			editUserItem(str, e) {
				this.showDialog = true
				this.activeItemName = str
			},
			// 当dialog弹出框输入框中的值发生变化时触发
			onChange(e) {
				this.currentValue = e.detail
			},
			// 关闭当前dialog对话框
			cancelCurrentDialog() {
				this.showDialog = false
				this.currentValue = ''
				this.activeItemName = ''
			},
			// 提交当前项的修改信息
			submitCurrentEdition() {
				let paramName = ''
				if(this.activeItemName === '手机号') {
					paramName = 'tel'
				} else if(this.activeItemName === '昵称') {
					paramName = 'name'
				}
				// 点击的cell单元格为手机号 需要对用户输入的手机号格式进行校验
				if(this.activeItemName === '手机号') {
					let regExp = /^[1][0-9]{10}$/
					console.log(regExp.test(this.currentValue))
					if(!regExp.test(this.currentValue)) {
						this.cancelCurrentDialog()
						return Toast.fail('手机号不规范')
					}
				} else if(this.activeItemName === '昵称') {
					uni.setStorageSync('uname', this.currentValue)
				}
				this.modifyUserInfo(paramName, this.currentValue)
				this.cancelCurrentDialog()
			},
			// 修改单个项个人信息
			async modifyUserInfo(paramName, val) {
				const { data: res } = await uni.$http.put('/user/modify', { id: uni.getStorageSync('uid'), [paramName]: val  })
				if(res.meta.status !== 200) return Toast.fail(res.meta.message)
				// 刷新界面
				this.getUserDetailInfo()
				},
			// 提交当前日历选中信息
			changeCurrentChosenDate(e) {
				this.currentBirthDate = e.detail.value
				this.modifyUserInfo('birth', this.currentBirthDate)
			},
			// 性别picker选中项发生改变时触发
			changeCurrentChosenSex(e) {
				this.currentSex = e.detail.value
				this.modifyUserInfo('sex', this.currentSex)
			}
		}
	}
</script>

<style>
	.img-area {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	
	.img-area image {
		width: 100px;
		height: 100px;
		border-radius: 50px;
	}
	
	.img-area text {
		font-size: 16px;
		margin-top: 20rpx;
	}
</style>
